<template>
    <div class="dropdown-menu dropdown-menu-open" v-if="shows">
        <ul >
            <li v-for="(li,i) in list" :key="i" @click="imetData(li.val)"><span class="num">{{li.val}}</span>{{li.guojia}}</li>
        </ul>
    </div>
</template>
<script>
export default {
  data() {
    return {
      shows: this.show,
      list: [
        { val: "+86", guojia: "中国大陆" },
        { val: "+1", guojia: "美国" },
        { val: "+852", guojia: "香港" },
        { val: "+81", guojia: "日本" },
        { val: "+886", guojia: "台湾" },
        { val: "+44", guojia: "英国" },
        { val: "+82", guojia: "韩国" },
        { val: "+33", guojia: "法国" },
        { val: "+7", guojia: "俄罗斯" },
        { val: "+39", guojia: "意大利" },
        { val: "+65", guojia: "新加坡" },
        { val: "+63", guojia: "菲律宾" },
        { val: "+60", guojia: "马来西亚" },
        { val: "+64", guojia: "新西兰" },
        { val: "+34", guojia: "西班牙" },
        { val: "+95", guojia: "缅甸" },
        { val: "+230", guojia: "毛里求斯" },
        { val: "+263", guojia: "津巴布韦" },
        { val: "+20", guojia: "西班牙" },
        { val: "+34", guojia: "埃及" },
        { val: "+880", guojia: "孟加拉国" }
      ]
    };
  },
  props: {
    show: Boolean
  },
  watch: {
    show: function(val) {
      this.shows = val;
    }
  },
  methods: {
    imetData(val) {
      this.$emit("childEvent", val);
      this.shows = false;
    }
  }
};
</script>

<style lang="less" scoped>
.dropdown-menu {
  z-index: 10 !important;
  left: -1px !important;
  top: 41px;
}
.dropdown-menu-open {
  display: block;
  z-index: 1;
}

.dropdown-menu {
  // display: none;
  width: 50%;
  position: absolute;
  height: 0;
  margin-right: 2px;
  ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border: 1px #e3e7ed solid;
    border-top: 0;
    background-color: #fff;
    overflow: auto;
    max-height: 208px;
    li {
      line-height: 42px;
      padding: 0 15px;
      cursor: pointer;
      span {
        float: right;
      }
    }
    li:hover {
      background-color: #f2f5f9;
    }
  }
}
</style>
